Webpackのbundle sizeを小さくする

重複するライブラリを共有する

これmonorepoのときのみの話なのか

code:js

module.exports = {

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {

config.plugins.push(new DuplicatePackageCheckerPlugin())

return config

},

}

optimization.splitChunks.chunk

ライブラリの重複importを避ける

なんでdefaultでtrueじゃないんだ

optimization.splitChunksを設定することでchunkを分割できる

vendor chunk を分割する

ファイルチャンクの最適化

Compression

画像の最適化

6

bundle analyzeしたら画像がinline化されてたらしい

webpack最適化

の5

SSG

nextも

スプレッドシートで結果の管理をする

Reduxサイズを下げる

reducer分割？

本当に寄与するのか？

code splittingする

reducerを動的に追加する？

サポートするライブラリの紹介など

next本家のredux code splittingの例

そのた

lcp

material-uiのminify

合ってるのか？

prod-modeではsource mapは不要

prodではdefautlではfalse

Bundle Wizard is a key tool to get an overview of all bundles loaded for a specific page. The best part about bundle-wizard is that it color-codes coverage for all components.

Running this command will generate a color-coded visualization similar to as shown below. From this, we can easily analyze which component/library in a bundle has less coverage and needs further investigation for optimizing the bundle.

webpack拡張

内容自体はどうでもいいけど、こういうふうに拡張するんやというのを見たいと思ってメモった

WebpackとNextの関係

Nextを使っていても、全てのWebpackの設定できるの？

それとも限られたものしか設定できない？

使っているとしたらwebpackのpluginのやつだと思う

現状もすでにchunk分割されているが、どういう意図でそれぞれ分けられているのかが不明

意図を知りたい

順番に改善していく系の記事

webpackのbundle後のサイズを減らす方法を、逐次的に紹介

依存先の依存先のライブラリがでかい時の対応

reactをlighthouseの指摘どおりに直していく

最後の項目がRemove unused JavaScript

やや参考になった